<template>
  <div class="MallIndex">
    <FadeSwiper class="swiperBox">
      <img class="banner" slot="item1" src="../../assets/img/banner1.jpg" />
      <img class="banner" slot="item2" src="../../assets/img/banner2.jpg" />
      <img class="banner" slot="item3" src="../../assets/img/banner3.jpg" />
      <img class="banner" slot="item4" src="../../assets/img/banner5.jpg" />
      <img class="banner" slot="item5" src="../../assets/img/banner4.jpg" />
    </FadeSwiper>

    <section class="newGoods section">
      <SectionHeader
        title="新品首发"
        tips="周一周四上新，为你寻觅世间好物"
        moreText="更多新品>"
      />
      <Slick
        :ulWidth="260 * goodsList.length + 10 * (goodsList.length - 1)"
        :showWidth="260 * 4 + 10 * 3"
        :height="360"
      >
        <ul
          class="goodsList"
          :style="{
            width: `${260 * goodsList.length + 10 * (goodsList.length - 1)}px`
          }"
          slot="list"
        >
          <GoodsItem
            v-for="(item, index) in goodsList"
            :style="{ marginRight: (index + 1) % 4 === 0 ? '0px' : '10px' }"
            :key="+item.id"
            :id="item.id"
            :img="item.img"
            :name="item.name"
            :price="item.price"
          />
        </ul>
      </Slick>
    </section>
    <section class="flashSale section">
      <SectionHeader
        title="限时购"
        tips="抢抢抢，好货不等人"
        moreText="更多抢购>"
      />
      <div class="content">
        <div class="left">
          <p class="title">特价场</p>
          <hr />
          <p class="tips">距离结束还剩</p>
          <div class="countBox">
            <span class="time">{{ h }}</span>
            <span>:</span>
            <span class="time">{{ m }}</span>
            <span>:</span>
            <span class="time">{{ s }}</span>
          </div>
          <div class="allBtn">查看全部 ></div>
        </div>
        <ul class="right">
          <li v-for="(item, index) in goodsList.slice(0, 4)" :key="item.id">
            <img class="leftImg" :src="item.img" />
            <div class="rightBox">
              <p
                class="goodsName ellipsis"
                @click="navTo('/mall/goods/' + item.id)"
              >
                {{ item.name }}
              </p>
              <div class="less">
                <span class="lessBar"><span class="lessBar2"></span></span>

                <span class="lessNum">还剩86件</span>
              </div>
              <div class="price">
                <span class="nowPrice">限时价¥{{ item.price }}</span>
                <span class="beforePrice">原价¥{{ item.price + 60 }}</span>
              </div>
              <div class="buyBtn" @click="navTo('/mall/goods/' + item.id)">
                立即抢购
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section class="hotGoods section">
      <SectionHeader
        title="人气推荐"
        tips="最火最潮商品，为您挑选"
        moreText="更多推荐>"
      />
      <div class="content">
        <ul class="left" v-if="goodsList[0]">
          <GoodsItem
            :id="goodsList[0].id"
            :img="goodsList[0].img"
            :name="goodsList[0].name"
            :price="goodsList[0].price"
          />
        </ul>
        <ul class="right">
          <GoodsItem
            v-for="(item, index) in goodsList.slice(3, 9)"
            :style="{ marginBottom: index <= 2 ? '10px' : '0px' }"
            :key="+item.id"
            :id="item.id"
            :img="item.img"
            :name="item.name"
            :price="item.price"
          />
        </ul>
      </div>
    </section>
    <section class="maker section">
      <SectionHeader
        title="品牌制造商"
        tips="工厂直达消费者，剔除品牌溢价"
        moreText="更多制造商>"
      />
      <div class="content">
        <ZoomImg imgSrc="http://mall.ttt5.net/manufacturer5.jpg" class="left">
          <div class="makerInfo" slot="otherEle">
            <p class="large">AD制造商</p>
            <hr />
            <p class="small">1500元起</p>
          </div>
        </ZoomImg>
        <ZoomImg imgSrc="http://mall.ttt5.net/slider1.jpg" class="center">
          <div class="makerInfo" slot="otherEle">
            <p class="large">UGG制造商</p>
            <hr />
            <p class="small">800元起</p>
          </div>
        </ZoomImg>
        <div class="right">
          <ZoomImg imgSrc="http://mall.ttt5.net/slider3.jpg">
            <div class="makerInfo" slot="otherEle">
              <p class="large">新秀丽制造商</p>
              <hr />
              <p class="small">400元起</p>
            </div>
          </ZoomImg>
          <ZoomImg imgSrc="http://mall.ttt5.net/slider2.jpg">
            <div class="makerInfo" slot="otherEle">
              <p class="large">MUJI制造商</p>
              <hr />
              <p class="small">200元起</p>
            </div>
          </ZoomImg>
        </div>
      </div>
    </section>
    <section
      class="typeSection section"
      v-for="(item, index) in typeList.slice(1)"
      :key="item.id"
    >
      <SectionHeader
        :title="item.name"
        tips
        moreText="查看更多>"
        @click.native="selectType(item.id)"
      />
      <ul class="content">
        <GoodsItem
          v-for="(item, index) in filterGoodsByType(item.id).slice(0, 4)"
          :style="{ marginRight: (index + 1) % 4 === 0 ? '0px' : '25px' }"
          :key="+item.id"
          :id="item.id"
          :img="item.img"
          :name="item.name"
          :price="item.price"
        />
      </ul>
    </section>
  </div>
</template>

<script>
import { getTypes, getGoodsList } from "../../api/client";
import SectionHeader from "../../components/SectionHeader";
import ZoomImg from "../../components/ZoomImg";
import GoodsItem from "../../components/GoodsItem";
import Slick from "../../components/Slick";
import FadeSwiper from "../../components/FadeSwiper";

import { getClientSize, getScrollWidth } from "../../util/util";

export default {
  name: "MallIndex",
  components: {
    SectionHeader,
    ZoomImg,
    GoodsItem,
    Slick,
    FadeSwiper
  },
  computed: {
    clientWidth() {
      return getClientSize().width - getScrollWidth() + "px";
    }
  },
  data() {
    return {
      typeList: [],
      goodsList: [],
      initTimestamp: 0,
      newTimestamp: 0,
      timer: null,
      h: 0,
      m: 0,
      s: 0
    };
  },

  methods: {
    filterGoodsByType(typeid) {
      return this.goodsList.filter(item => {
        return item.typeId === typeid;
      });
    },
    navTo(route) {
      this.$router.push(route);
    },
    selectType(typeId) {
      if (typeId == -1) {
        return;
      }
      this.navTo("/mall/show/goodsList/" + typeId + "/all");
    },
    getGoodsList(typeId) {
      const res = getGoodsList(typeId);
      res
        .then(data => {
          this.goodsList = data;
        })
        .catch(e => {
          alert(e);
        });
    },
    searchTip(tip) {
      alert(tip);
    },
    inputTextChange(text) {},
    scrollHandle() {
      const top = this.$refs.typeList.getBoundingClientRect().top;
      //还未到顶
      if (top > 0) {
        this.navShouldFixed = false;
      }
      //已经到顶
      else {
        this.navShouldFixed = true;
      }
    }
  },

  mounted() {
    //获取数据
    const res = getTypes();
    res
      .then(data => {
        data.unshift({
          id: -1,
          name: "首页"
        });
        this.typeList = data;
        this.getGoodsList(-1);
      })
      .catch(e => {
        alert(e);
      });

    //记录打开网页再加四小时的时间
    this.initTimestamp = new Date().getTime() + 4 * 60 * 60 * 1000;
    this.timer = setInterval(() => {
      this.newTimestamp = new Date().getTime();
      let diff = parseInt((this.initTimestamp - this.newTimestamp) / 1000);
      diff = ((diff % (86400 * 365)) % (86400 * 30)) % 86400;
      this.h = new String(Math.floor(diff / 3600)).padStart(2, "0");
      diff = diff % 3600;
      this.m = new String(Math.floor(diff / 60)).padStart(2, "0");
      diff = diff % 60;
      this.s = new String(diff).padStart(2, "0");
    }, 1000);
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
@import "../../assets/css/var.less";
.MallIndex {
  width: 100%;
  .swiperBox {
    // display: flex;
    // justify-content: center;
    position: absolute;
    // position: relative;
    left: 65px;
    top: 230px;
    margin: 0 auto;
    width: 1200px;
    height: 420px;
    margin: 0 80px;
    margin-top: 20px;
    display: block;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    .banner {
      transform: scale(1.2, 1);
    }
  }
  .section {
    padding: 30px;
    overflow: hidden;
    .Slick {
      position: relative;
      left: -30px;
    }
  }
  .newGoods {
    margin-top: 440px;
  }
  .flashSale {
    .content {
      border: 1px solid @borderColor;
      height: 376px;
      position: relative;
      .left {
        vertical-align: top;
        display: inline-block;
        width: 20%;
        height: 100%;
        position: relative;
        background-image: url(//yanxuan.nosdn.127.net/c9aeb62a3f79123d793d8c49b6698b09.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        color: #615548;
        cursor: pointer;
        .title {
          font-size: 26px;
          font-weight: 500;
          margin-top: 60px;
        }
        hr {
          width: 20px;
          height: 2px;
          background-color: #615548;
          border: none;
          margin-top: 20px;
        }
        .tips {
          font-size: 18px;
          margin-top: 20px;
        }
        .countBox {
          margin-top: 20px;
          .time {
            width: 42px;
            height: 42px;
            line-height: 42px;
            font-size: 19px;
            display: inline-block;
            color: white;
            background-color: #615548;
          }
        }
        .allBtn {
          width: 110px;
          height: 33px;
          line-height: 33px;
          font-size: 13px;
          background-color: #a7936e;
          color: white;
          border-radius: 20px;
          margin: 50px auto;
        }
      }
      .right {
        vertical-align: top;
        display: inline-block;
        width: 80%;
        height: 100%;
        position: absolute;
        top: 0;
        right: -20px;

        overflow: hidden;
        li {
          display: inline-block;
          width: 50%;
          height: 50%;
          overflow: hidden;

          .leftImg {
            width: 180px;
            height: 100%;
            display: inline-block;
          }
          .rightBox {
            display: inline-block;
            width: 240px;
            height: 100%;
            overflow: hidden;
            .goodsName {
              font-size: 15px;
              cursor: pointer;
              margin-top: 16px;
              &:hover {
                color: @thirdColor;
              }
            }
            .less {
              margin-top: 16px;
              .lessBar {
                position: relative;
                display: inline-block;
                width: 150px;
                height: 10px;
                background-color: #ffe5e5;
                border: 1px solid #f2cecd;
                border-radius: 10px;
                .lessBar2 {
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: inline-block;
                  width: 120px;
                  height: 8px;
                  background-color: rgb(247, 147, 147);
                  border-radius: 10px 0 0 10px;
                }
              }
              .lessNum {
                color: @fontDefaultColor;
                font-size: 13px;
              }
            }
            .price {
              margin-top: 16px;
              .nowPrice {
                color: @falseColor;
                font-size: 20px;
              }
              .beforePrice {
                color: @fontDefaultColor;
                text-decoration: line-through;
                margin-left: 10px;
                font-size: 14px;
              }
            }
            .buyBtn {
              margin-top: 16px;
              width: 120px;
              height: 30px;
              color: white;
              background-color: @falseColor;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }
          }
          &:nth-of-type(1) {
            border-bottom: 1px solid @borderColor;
            border-right: 1px solid @borderColor;
          }
          &:nth-of-type(2) {
            border-bottom: 1px solid @borderColor;
          }
          &:nth-of-type(3) {
            border-right: 1px solid @borderColor;
          }
        }
      }
    }
  }
  .maker {
    .content {
      .left,
      .center,
      .right {
        display: inline-block;
        height: 320px;
        width: 32%;
      }
      .left,
      .center {
        margin-right: 7px;
        .makerInfo {
          p {
            text-align: center;
          }
          hr {
            width: 60px;
          }
          .large {
            margin-top: 50px;
            margin-bottom: 10px;
            font-size: 26px;
          }
          .small {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
      .right {
        .ZoomImg {
          width: 100%;
          height: 49%;
          .makerInfo {
            p {
              text-align: left;
              margin-left: 30px;
            }
            hr {
              width: 60px;
              position: relative;
              left: -122px;
            }
            .large {
              margin-top: 30px;
              margin-bottom: 10px;
              font-size: 20px;
            }
            .small {
              margin-top: 10px;
              font-size: 12px;
            }
          }
          &:first-child {
            margin-bottom: 7px;
          }
        }
      }
    }
  }
  .hotGoods {
    background-color: rgb(244, 240, 234);
    height: 654px;
    .left {
      width: 394px;
      display: inline-block;
      vertical-align: top;
      .GoodsItem {
        width: 100%;
        height: 532px;
        background-color: white;
      }
      .GoodsItem /deep/ .imgBox {
        height: 380px;
      }
      .GoodsItem /deep/ .goodsInfo {
        height: auto;
      }
      .GoodsItem /deep/ .goodsName {
        font-size: 30px;
        line-height: 60px;
      }
    }
    .right {
      display: inline-block;
      vertical-align: top;
      width: 740px;
      height: 100%;
      .GoodsItem {
        width: 230px;
        height: 260px;
        background-color: white;
        margin-left: 10px;
        overflow: hidden;
      }
      .GoodsItem /deep/ .imgBox {
        height: 180px;
      }
    }
  }
}
</style>
